@import "../../styles/base";

.bank-apply-flow-container {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  background-color: $bg-color-base;

  .flow-title {
    padding: 26px 0 30px 35px;
    border-bottom: 1px solid $border-color-lighter;
    width: 90%;

    .text {
      font-size: 26px;
      color: $font-color-dark;
    }
  }

  .flow-container {
    display: flex;
    /* justify-content: space-evenly; */
    justify-content: space-around;
    height: 228px;
    width: 90%;

    .item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      flex-grow: 10;
      height: 228px;

      .image {
        width: 61px;
        height: 61px;
      }

      .text {
        margin-top: 28px;
        font-size: 24px;
      }

      .arrow {
        height: 30px;
        width: 34px;
      }
    }

    .item:nth-child(even) {
      flex-grow: 1;
      align-self: center;
      height: 30px;
      padding-bottom: 62px;
    }

    .item:nth-child(1) text {
      color: #96ced1;
    }
    .item:nth-child(3) text {
      color: #ff8564;
    }
    .item:nth-child(5) text {
      color: #ffaa4e;
    }
    .item:nth-child(7) text {
      color: #47de6b;
    }
  }
}
